<template>
  <view>
    <view style="position: absolute;z-index: 101;max-height: 70vh;min-height: 50vh;" @touchmove.stop.prevent="">
      <uni-popup ref="popup" type="bottom" :background-color="bgColor">
        <view class="depart-sure-cancel" style="background: var(--bg-center-color)">
          <view style="display: flex;flex-direction: row;align-items: center;">
            <view style="height: 28rpx;width: 10rpx;background-color: var(--grey-text);border-radius: 10rpx;">
            </view>
            <view style="font-size: 28rpx;font-weight: 600;color: var(--white-text);margin-left: 20rpx;">
              销售额：{{ formatNumber(businessData.totalMoney) || 0 }}
            </view>
          </view>
          <view style="color: var(--grey-text);font-size: 28rpx;" @click="closePopup">关闭</view>
        </view>
        <view class="line-split"></view>
        <scroll-view scroll-y style="max-height: 70vh;min-height: 50vh;" :show-scrollbar="false">
          <view style="padding-bottom: 50rpx;">
            <view style="padding: 0 30rpx;" v-if="count_total_business.length>0">
              <view
                  style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
                <view class="performance-detail-content-detail">
                  <view class="detail-title">
                    <view style="display: flex;flex-direction: row;">
                      <view class="detail-name font-28">
                        营业额：{{ formatNumber(businessData.totalMoneyList.businessMoney) || 0 }}
                      </view>
                    </view>
                  </view>
                  <view class="line-split"></view>
                  <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
                        v-for="(item,index) in count_total_business" :key="index">
                    <view class="detail-item" :class="{'align-end':index1 == 1}"
                          v-for="(detail,index1) in item" :key="index1">
                      <view class="label">{{ detail.payment_name }}：</view>
                      <view class="value">{{ formatNumber(detail.payment_money) || 0 }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <view style="padding: 0 30rpx;" v-if="businessData.totalMoneyList.businessMoneyNo>0">
              <view
                  style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
                <view class="performance-detail-content-detail">
                  <view class="detail-title">
                    <view style="display: flex;flex-direction: row;">
                      <view class="detail-name font-28">
                        非营额：{{ formatNumber(businessData.totalMoneyList.businessMoneyNo) || 0 }}
                      </view>
                    </view>
                  </view>
                  <view class="line-split"></view>
                  <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
                        v-for="(item,index) in count_total_no_business" :key="index">
                    <view class="detail-item" :class="{'align-end':index1 == 1}"
                          v-for="(detail,index1) in item" :key="index1">
                      <view class="label">{{ detail.payment_name }}：</view>
                      <view class="value">{{ formatNumber(detail.payment_money) || 0 }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

        </scroll-view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
export default {
  name: "tradeTotalPopup",
  data() {
    return {
      bgColor: 'var(--bg-color)',
      businessData: {},
      count_total_business: [],
      count_total_no_business: [],
    }
  },
  mounted() {

  },
  methods: {
    opens(item) {
      this.count_total_business = this.groupByThree(item.totalMoneyDetails.businessMoneyList)
      this.count_total_no_business = this.groupByThree(item.totalMoneyDetails.businessMoneyNoList)
      this.businessData = item
      this.$refs.popup.open()
    },
    closePopup() {
      this.$refs.popup.close()
    },
    groupByThree(array) {
      const result = [];
      for (let i = 0; i < array.length; i += 2) {
        result.push(array.slice(i, i + 2));
      }
      return result;
    },

    /**
     * 格式化处理
     * @param money
     * @returns {string|*}
     */
    formatNumber(money) {
      // 判断是否为整数（即小数部分是否为 0）
      if (money % 1 === 0) {
        return Number(money).toString()
      } else {
        return Number(money).toFixed(2)
      }
    }
  }
}
</script>

<style scoped lang="less">
.depart-sure-cancel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 90rpx;
  line-height: 90rpx;
}

.performance-detail-content-detail {
  border-radius: 10rpx;
  padding: 0 10rpx;
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: var(--white-text);
  margin-top: 30rpx;
}

.detail-name {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--white-text)
}

.detail-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 68rpx;
  align-items: center;
  line-height: 68rpx;
}

.detail-body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 70rpx;
}

.label {
  font-size: 24rpx;
  color: var(--grey-text);
}

.value {
  font-size: 24rpx;
  color: var(--white-text);
  font-weight: 600;
}

.detail-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.align-end {
  justify-content: flex-end;
}
</style>